<template>
  <div
    :class="className"
    :style="{ height: height, width: width }"
    id="pieChart"
  />
</template>

<script lang="ts">
import echarts, { EChartOption, ECharts } from 'echarts'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ResizeMixin from '@/components/charts/mixins/resize'

export interface IPieLibsChartData {
  legend: string[]
  series: {
    name: string
    value: number
  }[]
}

@Component({
  name: 'PieLibsChart'
})
export default class extends mixins(ResizeMixin) {
  // @Prop({ required: true }) private chartData!: IPieLibsChartData
  @Prop({ default: 'chart' }) private className!: string
  @Prop({ default: '100%' }) private width!: string
  @Prop({ default: '280px' }) private height!: string
  private chartData = [
    {
      name: '拣货区',
      value: '348',
      percentage: '19%'
    },
    {
      name: '出库区',
      value: '487',
      percentage: '26%'
    },
    {
      name: '暂存库区',
      value: '677',
      percentage: '37%'
    },
    {
      name: '进货暂存区',
      value: '126',
      percentage: '6%'
    },
    {
      name: '出货暂存区',
      value: '298',
      percentage: '16%'
    }
  ] as any

  protected chart!: ECharts | null

  @Watch('chartData', { deep: true })
  private onChartDataChange(value: IPieLibsChartData) {
    console.log('value', value)
    // this.setOptions(value)
  }

  get options() {
    return {
      color: ['#0076FF', '#52D4F3', '#5D7092', '#FFB200', '#FF7100'],
      title: {
        x: 'left',
        textStyle: {
          color: '#FFFFFF',
          fontSize: 25
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {d}%'
      },
      // 设置右侧内容
      legend: {
        // type: 'plain', // 普通图例
        orient: 'vertical',
        // x: 'right', 设置小圆点位置
        selectedMode: false, // 去除点击圆点事件
        y: 'center',
        left: 50 + '%',
        top: 60,
        itemGap: 20, // 间隔
        itemWidth: 10,
        itemHeight: 10,
        icon: 'circle',
        // formatter: '{name}',
        data: this.chartData,
        formatter: (name: any) => {
          // var total = 0
          var value
          var target
          for (var i = 0, l = this.chartData.length; i < l; i++) {
            // total += this.chartData[i].percentage
            if (this.chartData[i].name === name) {
              target = this.chartData[i].percentage
              value = this.chartData[i].value
              console.log(target)
            }
          }
          var arr = [
            '{a|' + name + '}',
            '{b|' + target + '}',
            '{c|' + value + '}'
          ]
          return arr.join(' ')
        },
        // 设置右侧内容样式
        textStyle: {
          fontSize: 12,
          rich: {
            a: {
              align: 'left',
              width: 80
            },
            b: {
              align: 'center',
              width: 50
            },
            c: {
              align: 'right',
              width: 50
            }
          }
        }
      },
      // calculable: true,
      series: [
        {
          name: '',
          type: 'pie',
          radius: '70%', // 饼图的半径大小
          center: ['30%', '50%'], // 饼图的位置
          data: this.chartData ? this.chartData : [0, 0, 0],
          label: {
            // 饼图图形上的文本标签
            normal: {
              show: true,
              position: 'inner', // 标签的位置
              textStyle: {
                fontWeight: 300,
                fontSize: 14 // 文字的字体大小
              },
              formatter: '{c}' // 设置饼图上显示的内容
            }
          },
          // 鼠标经过饼图
          itemStyle: {
            emphasis: {
              // shadowBlur: 10,
              // shadowOffsetX: 0,
              // shadowColor: 'rgba(0, 0, 0, 0.5)',
              borderWidth: 4
            },
            normal: {
              borderWidth: 1,
              borderColor: '#ffffff'
            }
          }
        }
      ]
    } as EChartOption
  }

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }

  private initChart() {
    // this.chart = echarts.init(this.$el as HTMLDivElement, MacaronsTheme)
    // this.chart = echarts.init(this.$el )
    const dom = (document.getElementById('pieChart') as HTMLDivElement)
    const myChart = echarts.init(dom)
    myChart.setOption((this.options) as any, true)

    // this.setOptions(this.chartData)
  }

  // private setOptions(chartData: IPieLibsChartData) {
  //   if (this.chart) {
  //     this.chart.setOption({
  //       color: ['red', 'orange', 'yellow', 'green', 'mediumpurple', 'blue', 'purple', 'grey'],
  //       // 这个是位置控制
  //       grid: {
  //         top: 0,
  //         left: 0,
  //         right: 0,
  //         bottom: 0
  //       },
  //       // 鼠标悬浮控制
  //       tooltip: {
  //         trigger: 'item',
  //         formatter: '{a} <br/>{b}: {c} ({d}%)'
  //         // backgroundColor: 'rgba(0, 0, 0, 0.67)'
  //       },
  //       // 控制右边小方块展示
  //       legend: {
  //         right: 0,
  //         type: 'scroll',
  //         orient: 'vertical',
  //         data: chartData.legend
  //         // data: ['拣货区', '出库区', '暂存库区', '进货暂存区', '出货暂存区']
  //       },
  //       series: [
  //         {
  //           top: 0,
  //           name: '库存',
  //           type: 'pie',
  //           radius: '90%',
  //           avoidLabelOverlap: false,
  //           // 展示指针分出效果
  //           label: {
  //             show: false,
  //             position: 'center'
  //           },
  //           emphasis: {
  //             label: {
  //               show: true,
  //               fontSize: '30',
  //               fontWeight: 'bold'
  //             }
  //           },
  //           labelLine: {
  //             show: false
  //           },
  //           data: chartData.series
  //           // data: [
  //           //   { value: 348, name: '拣货区' },
  //           //   { value: 487, name: '出库区' },
  //           //   { value: 677, name: '暂存库区' },
  //           //   { value: 126, name: '进货暂存区' },
  //           //   { value: 298, name: '出货暂存区' }
  //           // ],
  //           // itemStyle: {
  //           //   color: (params: any) => {
  //           //     // console.log(params.name)
  //           //     let colorVal = '#0076FF'
  //           //     switch (params.name) {
  //           //       case '质检区':
  //           //         colorVal = '#0076FF'
  //           //         break
  //           //       case '分拣区':
  //           //         colorVal = '#52D4F3'
  //           //         break
  //           //       case '存储区':
  //           //         colorVal = '#5D7092'
  //           //         break
  //           //       case '入库缓存区':
  //           //         colorVal = '#FF7100'
  //           //         break
  //           //       case '出库缓存区':
  //           //         colorVal = '#FFB200'
  //           //         break
  //           //     }
  //           //     return colorVal
  //           //   }
  //           // }
  //         }
  //       ]
  //     } as EChartOption<any>)
  //   }
  // }
}
</script>
